<template>
  <div class="Withdraw">
    <div class="h-s">
      <span><router-link to="/"><i></i>首页</router-link></span>
      <span>个人收钱</span>
      <span><i></i></span>
    </div>
    <article>
      <div class="art_code">
        <p>支付宝扫一扫，向我付钱</p>
        <div class="art_code_img">
          <img src="../../static/img/collect_03.jpg">
        </div>
        <p class="art_active"><span>设置金额</span><span class="art_line"></span><span>保存图片</span></p>
      </div>
      <div class="update">
        <p><span></span>升级你的收钱二维码</p>
        <p>提现免费<span></span><i class="glyphicon glyphicon-chevron-right"></i></p>
      </div>
      <div class="art_end">
        <p>收款记录</p>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: 'Withdraw',

  data () {
    return {

    }
  }
  // methods:{
  //   changTitle:function () {
  //     this.title="changde"
  //   }
  // }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body,header,div.Withdraw,article{
    background: #0e80d8;
  }
  .h-s{
    padding: .8rem;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 1rem;
  }
  .h-s span:nth-child(1) a{
    color: #fff;
  }
  .h-s span i{
    display: inline-block;
    width: 1rem;
    height: 2rem;
    vertical-align: middle;
  }
  .h-s span:nth-child(1) i{
    background: url(../../static/img/back.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-right: .5rem;
    width: 0.9rem;
    height: 1.3rem;
  }
  .h-s span:nth-child(3) i{
    width: 2rem;
    height: .8rem;
    background: url(../../static/img/more.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  article{
    padding: 1rem;
  }
  div.art_code,div.update{
    width: 95%;
    margin: 0 auto;
    color: #333;
    background: #fff;
    padding: 5% 0;
    border-radius: 5px;
  }
  div.art_code p{
    text-align: center;
  }
  div.art_code div.art_code_img{
    text-align: center;
    margin: 15% 0;
  }
  div.art_code div.art_code_img img{
    width: 80%;
    height: 80%;
  }
  div.art_code p.art_active{
    width: 80%;
    margin: 0 auto;
    color: #1490e9;
    display: flex;
    justify-content: space-between;
  }
  div.art_code p.art_active span.art_line{
    border: 1px solid #c7c7c7;
    font-size: 1.2rem;
  }
  div.update{
    margin: 0 auto;
    margin-top: .8rem ;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  div.update p:nth-child(1) span{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url(../../static/img/collect_07.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    vertical-align: middle;
  }
  div.update p:nth-child(2) span{
    display: inline-block;
    width: 2rem;
    height: 3rem;
    background: url(../../static/img/collect_05.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    vertical-align: middle;
  }
  i.glyphicon-chevron-right{
    color: #c7c7c7;
    font-size: 1.5rem;
    font-weight: 100;
  }
  div.art_end{
    color: #cfe8fb;
    padding: 5% 0;
  }
  div.art_end p{
    text-align: center;
    font-size: 1.5rem;
  }
</style>
